<template>
  <div>
    <div class="search_box">
      <p>设备编号：</p>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="background: #5c84ff"
        @click="queryEquipment"
        >查询</el-button
      >
    </div>
    <div class="table_box">
      <div class="btn">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          style="background: linear-gradient(to right, #ff8f3e, #ff6927)"
          @click="buildEquipment"
          >新建</el-button
        >
        <el-button style="background: #fcf4ef" @click="batch"
          >批量操作</el-button
        >
      </div>
      <el-table
        :data="equipmentList"
        style="width: 100%; color: #666,border-bottom:none"
        :border="false"
        :header-cell-style="{ background: '#f3f6fa', color: '#666' }"
        ref="tableRef"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="innerCode" label="设备编号" ref="vmTable">
        </el-table-column>
        <el-table-column prop="typeName" label="设备型号"> </el-table-column>
        <el-table-column prop="nodeName" label="详细地址"> </el-table-column>
        <el-table-column prop="ownerName" label="合作商"> </el-table-column>
        <el-table-column prop="vmStatus" label="运营状态"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <!-- 通过插槽获取单行的数据 -->
          <template #default="scope">
            <el-button type="text" style="padding: 0" @click="goods(scope.row)"
              >货道</el-button
            >
            <el-button type="text" style="padding: 0" @click="policy(scope.row)"
              >策略</el-button
            >
            <el-button type="text" style="padding: 0" @click="modify(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container" v-if="equipmentList.length !== 0">
        <el-pagination layout="slot">
          <template>
            <span
              >共{{ page.totalCount }}条记录 第{{ page.pageIndex }}/{{
                page.totalPage
              }}页</span
            >
            <div class="btn">
              <button
                :disabled="page.pageIndex === '1'"
                @click="change_page(-1)"
              >
                上一页
              </button>
              <button
                :disabled="page.totalPage === page.pageIndex"
                @click="change_page(1)"
              >
                下一页
              </button>
            </div>
          </template>
        </el-pagination>
      </div>
    </div>

    <!-- 策略弹出框1 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="dialogVisible1"
      width="30%"
      @close="handleClose"
    >
      <!-- 选择框 -->
      <span style="margin-right: 16px">选择策略：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="setStrategy"
          style="background: #5984ff"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 策略弹出框2 -->
    <el-dialog title="策略管理" :visible.sync="dialogVisible2" width="30%">
      <!-- 内容 -->
      <span>机器编号:{{ strategy.innerCode }}</span
      ><br />
      <span>策略名称:{{ strategy.ploicyName }}</span
      ><br />
      <span>策略方案:{{ strategy.discount }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="cancelStrategy"
          style="background: #5984ff"
          >取消策略</el-button
        >
      </span>
    </el-dialog>

    <!-- 新建设备弹出框 -->
    <el-dialog
      title="新增设备"
      :visible.sync="dialogVisible3"
      @close="handleClose1"
    >
      <p>设备编号：系统自动生成</p>
      <p style="margin: 16px 0">
        <span style="margin-right: 16px">选择型号：</span>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
            v-for="item in modelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        <span style="margin-right: 16px">选择点位：</span>
        <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in pointList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="enterBuild">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改设备弹出框 -->
    <el-dialog title="修改设备" :visible.sync="dialogVisible4">
      <p style="margin: 16px 0">机器编号：{{ equipmentDetails.innerCode }}</p>
      <p style="margin: 16px 0">
        供货时间：{{ equipmentDetails.lastSupplyTime }}
      </p>
      <p style="margin: 16px 0">设备类型：{{ equipmentDetails.type }}</p>
      <p style="margin: 16px 0">设备容量：{{ equipmentDetails.cityCode }}</p>
      <p>
        <span style="margin-right: 16px">设备点位：</span>
        <el-select v-model="value3" placeholder="请选择">
          <el-option
            v-for="item in pointList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p style="margin: 16px 0">合作商：{{ equipmentDetails.ownerName }}</p>
      <p style="margin: 16px 0">所属区域：{{ equipmentDetails.region }}</p>
      <p style="margin: 16px 0">设备地址：{{ equipmentDetails.node }}</p>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="enterModify">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 货道弹出框 -->
    <el-dialog
      title="货道设置"
      :visible.sync="dialogVisible5"
      width="940px"
      class="goods"
      @close="handleClose2"
    >
      <el-button
        class="left el-icon-arrow-left"
        @click="right_move"
        :disabled="leftBtn"
        v-if="configList.vmCol > 5"
      ></el-button>
      <el-button
        class="right el-icon-arrow-right"
        @click="left_move"
        :disabled="rightBtn"
        v-if="configList.vmCol > 5"
      ></el-button>
      <div class="card_container">
        <div class="title">
          <span>货道行数：{{ configList.vmRow }}</span>
          <span>货道列数：{{ configList.vmCol }}</span>
          <span>货道容量(个)：{{ configList.channelMaxCapacity }}</span>
          <el-button class="btn" @click="goods_sort">智能排货</el-button>
        </div>
        <el-scrollbar class="good_list" ref="goodRef">
          <ul ref="ulRef">
            <li class="row" v-for="(item1, index1) in goodsList" :key="index1">
              <div class="card" v-for="(item, index) in item1" :key="index">
                <div class="tag">{{ item?.channelCode }}</div>
                <div class="top">
                  <div class="img">
                    <img
                      :src="item?.sku?.skuImage ? item?.sku?.skuImage : '1'"
                      alt=""
                      v-imgerror="img"
                    />
                  </div>
                  <div class="txt">
                    {{
                      item?.sku?.skuImage ? item?.sku?.brandName : '暂无商品'
                    }}
                  </div>
                </div>
                <div class="bottom">
                  <el-button type="text" @click="addGoods(item, index)"
                    >添加</el-button
                  >
                  <el-button
                    type="text"
                    @click="del(item, index)"
                    :disabled="item?.sku?.brandName ? false : true"
                    :style="{
                      color: item?.sku?.brandName ? '#ff5a5a' : '#ffdada'
                    }"
                    >删除</el-button
                  >
                </div>
              </div>
            </li>
          </ul>
        </el-scrollbar>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible5 = false">取 消</el-button>
        <el-button type="primary" @click="changeSrot">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 智能排货 -->
    <el-dialog
      class="goods_sort"
      title="智能排货"
      :visible.sync="dialogVisible6"
      width="858px"
    >
      <div class="body">
        <p class="tips">该区域属于{{ CBD }}商圈适合销售一下商品：</p>
        <div class="list">
          <div
            class="card_box"
            v-for="(item, index) in proposalList"
            :key="index"
          >
            <div class="card">
              <div class="top">
                <div class="img">
                  <img :src="item.image" alt="" />
                </div>
                <div class="txt">
                  {{ item.skuName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible6 = false">取 消</el-button>
        <el-button type="primary" @click="enterSort">采纳建议</el-button>
      </span>
    </el-dialog>

    <!-- 添加商品 -->
    <el-dialog
      class="add_goods"
      title="添加商品"
      :visible.sync="dialogVisible7"
      width="858px"
      @close="handleClose3"
    >
      <el-button
        class="left el-icon-arrow-left"
        :disabled="addGoodsPage.pageIndex == 1"
        @click="add_change_page(-1)"
        v-if="addTotalCount > 10"
      ></el-button>
      <el-button
        class="right el-icon-arrow-right"
        :disabled="addGoodsPage.pageIndex == addTotalPage"
        @click="add_change_page(1)"
        v-if="addTotalCount > 10"
      ></el-button>
      <div class="body">
        <div class="input">
          <p>商品名称：</p>
          <el-input
            v-model.trim="input4"
            placeholder="请输入内容"
            @input="searchAddGoods"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            style="background: #5c84ff"
            @click="searchAddGoods"
            >查询</el-button
          >
        </div>
        <div class="list" ref="addCardList">
          <div
            class="card_box"
            v-for="(item, index) in addGoodsList"
            :key="index"
            @click="getCard(item, index)"
          >
            <div class="tag" v-show="index === cardIndex">
              <img :src="tagImg" alt="" />
            </div>
            <div class="card">
              <div class="top">
                <div class="img">
                  <img :src="item.skuImage" alt="" />
                </div>
                <div class="txt">{{ item.brandName }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible7 = false">取 消</el-button>
        <el-button type="primary" @click="enterAdd">确定添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEquipment,
  getPolicy,
  getStrategy,
  cancelStrategy,
  setStrategy,
  getModel,
  getPoint,
  enterBuild,
  enterModify,
  getGoodsList,
  getEquipmentConfig,
  getCBD,
  getProposal,
  changeSrot,
  addGoods
} from '@/api/equipment'
import { Message } from 'element-ui'
export default {
  name: 'equipment-page',
  created() {
    this.getEquipment()
  },
  data() {
    return {
      rightBtn: false,
      leftBtn: true,
      img: require('@/assets/img.png'),
      tagImg: require('@/assets/tagImg.png'),
      // 每页数量
      page: {
        pageIndex: '',
        pageSize: '',
        totalCount: '',
        totalPage: ''
      },

      // 策略选择框
      options: [],
      value: '',
      // 弹窗显示
      dialogVisible1: false, // 策略弹出框1
      dialogVisible2: false, // 策略弹出框2
      dialogVisible3: false, // 新建设备弹出框
      dialogVisible4: false, // 修改设备弹出框
      dialogVisible5: false, // 货道弹出框
      dialogVisible6: false, // 智能排货
      dialogVisible7: false, // 添加商品
      // 输入框
      input: '',
      // 设备列表
      equipmentList: [],
      // 策略
      strategy: {
        innerCode: null,
        policyName: null,
        discount: null,
        policyId: null
      },
      // innerCode
      setStrategyObj: {
        innerCodeList: [],
        policyId: ''
      },
      // 新建设备
      value1: '',
      modelList: [],
      value2: '',
      pointList: [],

      // 修改设备
      value3: '',
      // 设备详情
      equipmentDetails: {},
      equipmentID: '',

      // 商品列表
      goodsList: [],
      configList: {},
      innerCode: '',
      CBD: '',
      proposalList: [],

      // 添加商品
      addGoodsPage: {
        pageIndex: 1,
        pageSize: 10
      },
      addGoodsList: [],
      input4: '',
      addTotalPage: 1,
      addTotalCount: '',
      addIndex: '',
      addRow: '',
      addGoodItem: {},
      cardIndex: ''
    }
  },
  methods: {
    // 获取页面数据
    async getEquipment(obj) {
      try {
        const res = await getEquipment(obj)
        console.log('设备列表', res)
        this.page = {
          pageIndex: res.pageIndex,
          pageSize: res.pageSize,
          totalCount: res.totalCount,
          totalPage: res.totalPage
        }
        // 处理数据
        this.equipmentList = res.currentPageRecords.map((item, index) => {
          let str = ''
          if (item.vmStatus === 0) str = '未投放'
          if (item.vmStatus === 1) str = '运营'
          if (item.vmStatus === 3) str = '撤机'
          const obj = {
            innerCode: item.innerCode,
            typeName: item.type.name,
            nodeName: item.node.name,
            ownerName: item.ownerName,
            vmStatus: str
          }
          return obj
        })
      } catch (error) {}
    },

    // 下一页上一页
    change_page(num) {
      this.page.pageIndex = Number(this.page.pageIndex) + num
      // const obj = {
      //   pageIndex: this.page.pageIndex,
      //   pageSize: this.page.pageSize
      // }
      this.getEquipment(this.page)
    },

    // 查询设备
    queryEquipment() {
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        innerCode: this.input
      }
      this.getEquipment(obj)
    },

    // 新建设备
    async buildEquipment() {
      this.dialogVisible3 = true
      // 获取型号下拉选项
      const model = await getModel()
      this.modelList = model.currentPageRecords.map((item, index) => {
        const obj = {
          value: item.typeId,
          label: item.name
        }
        return obj
      })
      // 获取点位下拉选项
      const point = await getPoint()
      this.pointList = point.currentPageRecords.map((item, index) => {
        const obj = {
          value: item.id,
          label: item.name
        }
        return obj
      })
    },

    // 确认新建
    async enterBuild() {
      const obj = {
        vmType: this.value1,
        nodeId: this.value2,
        createUserId: 1
      }
      try {
        await enterBuild(obj)
        Message.success('添加成功')
        this.dialogVisible3 = false
        this.getEquipment(this.page)
      } catch (error) {
        Message.error('请选择型号和点位')
      }
    },
    // 重置新建窗口
    handleClose1() {
      this.value1 = ''
      this.value2 = ''
    },

    // 打开策略弹窗 获取下拉选数据 然后点确定的时候发送ajax
    async policy(row) {
      // 获取 当前策略
      const strategy = await getStrategy(row.innerCode)
      // 如果有策略就显示策略弹窗2
      if (strategy) {
        this.dialogVisible2 = true
        this.strategy.innerCode = strategy.innerCode
        this.strategy.ploicyName = strategy.policyName
        this.strategy.discount = strategy.discount + '%'
        this.strategy.policyId = strategy.policyId
      } else {
        // 如果没有就显示策略弹窗1 让用户选择策略
        this.dialogVisible1 = true
        this.setStrategyObj.innerCodeList.push(row.innerCode)
        // 获取下拉选列表
        const res = await getPolicy()
        // 处理数据
        this.options = res.map((item, index) => {
          const obj = {
            // value: '选项' + (index + 1),
            value: item.policyId,
            label: item.policyName
          }
          return obj
        })
      }
    },

    // 应用策略
    async setStrategy() {
      if (!this.value) return
      this.setStrategyObj.policyId = this.value
      await setStrategy(this.setStrategyObj)
      this.$message.success('应用成功')
      // 清除表格选择
      this.$refs.tableRef.clearSelection()
      this.dialogVisible1 = false
    },

    // 取消已应用策略
    async cancelStrategy() {
      await cancelStrategy(this.strategy.innerCode, this.strategy.policyId)
      Message.success('取消应用成功')
      this.dialogVisible2 = false
    },

    // 策略框关闭时重置
    handleClose() {
      // 重置
      this.setStrategyObj.innerCodeList = []
      this.setStrategyObj.policyId = ''
      this.value = ''
    },

    // 批量操作
    async batch() {
      const arr = this.$refs.tableRef.selection
      if (!arr.length) return Message.error('请选择设备')
      this.dialogVisible1 = true

      // 获取下拉选列表
      const res = await getPolicy()
      // 处理数据
      this.options = res.map((item, index) => {
        const obj = {
          value: item.policyId,
          label: item.policyName
        }
        return obj
      })
      this.setStrategyObj.innerCodeList = arr.map((item) => {
        return item.innerCode
      })
    },

    // 修改设备
    async modify(row) {
      // 获取 当前设备的详情
      const {
        currentPageRecords: [details]
      } = await getEquipment({
        innerCode: row.innerCode
      })

      // 处理数据
      const obj = {
        innerCode: details.innerCode,
        lastSupplyTime: details.lastSupplyTime,
        type: details.type.name,
        cityCode: details.cityCode,
        node: details.node.name,
        ownerName: details.ownerName,
        region: details.region.name
      }
      this.equipmentDetails = obj

      // 设置选择设备id 用来确认修改时传参
      this.equipmentID = details.id
      // 获取点位下拉选项
      const point = await getPoint()
      this.pointList = point.currentPageRecords.map((item, index) => {
        const obj = {
          value: item.id,
          label: item.name
        }
        return obj
      })
      // 设置选择框默认选项
      this.value3 = details.node.id
      this.dialogVisible4 = true
    },
    // 确定修改
    async enterModify() {
      try {
        await enterModify(this.equipmentID, this.value3)
        Message.success('修改成功')
        this.getEquipment(this.page)
        this.dialogVisible4 = false
      } catch (error) {
        Message.error('修改失败，设备正在运行')
      }
    },

    // 商品 货道
    async goods(row) {
      this.innerCode = row.innerCode
      const res = await getGoodsList(row.innerCode)
      const { currentPageRecords: model } = await getModel()
      const [type] = model.filter((item) => {
        return item.name === row.typeName
      })
      const config = await getEquipmentConfig(type.typeId)
      this.configList = config

      // 处理数据
      const num = Math.floor(res.length / config.vmCol)
      for (let i = 0; i < num; i++) {
        const newArr = []
        res.forEach((item) => {
          const length = item.channelCode.indexOf('-')
          const str = item.channelCode.substring(0, length)
          if (+str === i + 1) {
            newArr.push(item)
          }
        })
        this.goodsList.push(newArr)
      }

      this.dialogVisible5 = true
    },

    // 往左移动
    left_move() {
      this.$refs.ulRef.style.transform = 'translateX(-100%)'
      this.rightBtn = true
      this.leftBtn = false
    },
    // 往右移动
    right_move() {
      this.$refs.ulRef.style.transform = 'translateX(0)'
      this.rightBtn = false
      this.leftBtn = true
    },
    // 重置货道表单
    handleClose2() {
      this.goodsList = []
      // 两种方法都可以使滚动条回到顶部
      // this.$refs.goodRef.scrollTo(0, 0)
      this.$refs.goodRef.scrollTop = 0
      this.$refs.ulRef.style.transform = 'translateX(0)'
      this.rightBtn = false
      this.leftBtn = true
    },
    // 推荐排序
    async goods_sort() {
      const {
        currentPageRecords: [details]
      } = await getEquipment({
        innerCode: this.innerCode
      })
      this.CBD = await getCBD(details.businessId)
      this.proposalList = await getProposal(details.businessId)
      this.dialogVisible6 = true
    },
    // 删除商品
    del(item, index) {
      // 为了使对象响应式 可以先删除属性再添加一个同名属性
      const num =
        item.channelCode.substring(0, item.channelCode.indexOf('-')) - 1

      this.$delete(this.goodsList[num][index].sku, 'skuImage')
      this.goodsList[num][index].sku.skuImage = ''
      this.goodsList[num][index].sku.brandName = ''
      this.goodsList[num][index].skuId = 0

      // 强制更新视图
      // this.$forceUpdate()
    },
    // 采纳建议
    enterSort() {
      this.proposalList.forEach((item, index) => {
        this.goodsList[0][index].sku = {}
        this.goodsList[0][index].skuId = item.skuId
        this.goodsList[0][index].sku.brandName = item.skuName
        this.goodsList[0][index].sku.skuImage = item.image
      })
      this.dialogVisible6 = false
    },
    // 应用排序
    async changeSrot() {
      const newGoodsList = []
      this.goodsList.forEach((item) => {
        newGoodsList.push(...item)
      })
      const arr = newGoodsList.map((item) => {
        return { channelCode: item.channelCode, skuId: item.skuId }
      })
      const obj = {
        innerCode: this.innerCode,
        channelList: arr
      }
      try {
        await changeSrot(obj)
        Message.success('更改成功')
        const obj1 = {
          pageIndex: this.page.pageIndex,
          pageSize: this.page.pageSize
        }
        this.getEquipment(obj1)
        this.dialogVisible5 = false
      } catch (error) {}
    },
    // 表格序号
    indexMethod(index) {
      // 当前页数减一 乘以 每页个数 加 索引值(从零开始）+1
      return (this.page.pageIndex - 1) * this.page.pageSize + index + 1
    },
    // 添加商品
    async addGoods(item, index) {
      if (this.addIndex === '') this.addIndex = index
      this.addRow =
        item.channelCode.substring(0, item.channelCode.indexOf('-')) - 1
      const res = await addGoods(this.addGoodsPage)
      this.addGoodsList = res.currentPageRecords
      this.addTotalPage = res.totalPage
      this.addTotalCount = res.totalCount
      this.dialogVisible7 = true
    },

    // 下一页上一页
    async add_change_page(num) {
      // 修改页数
      this.addGoodsPage.pageIndex = Number(this.addGoodsPage.pageIndex) + num
      if (this.input4) {
        // 如果输入框有内容
        const obj = { ...this.addGoodsPage, skuName: this.input4 }
        const res = await addGoods(obj)
        this.addGoodsList = res.currentPageRecords
        this.addTotalPage = res.totalPage
        this.addTotalCount = res.totalCount
        return
      }
      this.addGoods()
    },
    // 搜索
    async searchAddGoods() {
      // 每次输入都要从第一页开始请求
      this.addGoodsPage.pageIndex = 1
      if (this.input4 !== '') {
        const obj = { ...this.addGoodsPage, skuName: this.input4 }
        const res = await addGoods(obj)
        this.addGoodsList = res.currentPageRecords
        this.addTotalPage = res.totalPage
        this.addTotalCount = res.totalCount
      } else {
        this.addGoods()
      }
    },
    // 获取卡片信息
    getCard(e, index) {
      this.addGoodItem = e
      this.cardIndex = index
    },
    // 确认添加
    enterAdd() {
      if (this.goodsList[this.addRow][this.addIndex].sku === null) {
        this.goodsList[this.addRow][this.addIndex].sku = {}
      }
      this.goodsList[this.addRow][this.addIndex].skuId = this.addGoodItem.skuId
      this.goodsList[this.addRow][this.addIndex].sku.brandName =
        this.addGoodItem.brandName
      this.goodsList[this.addRow][this.addIndex].sku.skuImage =
        this.addGoodItem.skuImage
      this.dialogVisible7 = false
    },

    // 重置添加弹出框
    handleClose3() {
      this.addIndex = ''
      this.input4 = ''
      this.cardIndex = ''
      this.addGoodsPage.pageIndex = 1
    }
  }
}
</script>

<style scoped lang="scss">
// 所有弹窗设置圆角
::v-deep .el-dialog {
  border-radius: 8px;
}
// 按钮通用样式
.el-button {
  padding: 10px 16px;
  border: none;
}
// 查询
.search_box {
  display: flex;
  align-items: center;
  height: 64px;

  margin-bottom: 20px;
  padding-left: 17px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
  p {
    padding-right: 12px;
  }
}
// 表格
.table_box {
  padding: 20px 0 0 17px;
  .btn {
    margin-bottom: 20px;
  }
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border: none;
}
::v-deep .el-table td.el-table__cell {
  border: none;
}
.el-table::before {
  height: 0px;
}
.pagination-container {
  padding: 32px 16px;
  width: 100%;
  span {
    float: left;
  }
  .btn {
    float: right;
  }
}

// 弹窗样式
::v-deep .goods {
  .el-dialog {
    position: relative;
  }
}
.left {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #333;
  &:hover {
    cursor: pointer;
  }
}
.right {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0;

  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #333;
  &:hover {
    cursor: pointer;
  }
}
.card_container {
  width: 847px;
  margin: 0 auto;
  height: 456px;
  overflow: hidden;
  .title {
    width: 100%;
    height: 56px;
    background-color: #f3f6fa;

    margin-bottom: 16px;
    line-height: 56px;
    span {
      margin-left: 43px;
    }
    .btn {
      float: right;
      margin: 10px 22px 0 0;
      background-color: #5c84ff;
      height: 36px;
      color: #fff;
      font-weight: 700;
    }
  }
  // 货道列表
  .good_list {
    // background-color: yellow;
    width: 829px;
    // height: 456px;
    height: 456px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

    ul {
      transition: transform 1s;
      transform: translateX(0px);
      &::after {
        content: '';
        display: block;
        height: 56px;
      }
      .row {
        // width: 1660px;
        display: flex;
        margin-bottom: 20px;
        // flex-wrap: wrap;

        .card {
          position: relative;
          flex-shrink: 0;
          width: 150px;
          height: 180px;
          margin: 0 8px;
          border-radius: 4px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
          .tag {
            position: absolute;
            top: 10px;
            left: 0;
            width: 42px;
            height: 22px;
            background-color: #809bed;
            border-radius: 0 4px 4px 0;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 22px;
          }
          .top {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 150px;
            height: 135px;
            padding-top: 16px;
            border-radius: 4px 4px 0 0;

            background-color: #f6f7fb;
            .img {
              width: 84px;
              height: 78px;
              margin-bottom: 10px;
              img {
                // width: 84px;
                height: 78px;
              }
            }
          }
          .bottom {
            height: 40px;
            text-align: center;
            font-size: 14px;

            .el-button[type] {
              padding: 12px 0;
            }
          }
        }
      }
    }
  }
}
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
::v-deep .is-horizontal {
  .el-scrollbar__thumb {
    display: none;
  }
}
::v-deep .el-scrollbar__bar.is-vertical {
  height: 380px;
}

// 建议列表
::v-deep .goods_sort {
  .el-dialog {
    min-height: 210px;
  }
  .body {
    width: 770px;
    margin: 0 auto;
    .tips {
      margin-bottom: 16px;
    }
    .list {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .card_box {
        flex-shrink: 0;
        width: 154px;
        height: 154px;
        padding: 0 10px;
        .card {
          // margin-bottom: 20px;
          border-radius: 4px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

          .top {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 134px;
            height: 134px;
            padding-top: 16px;
            border-radius: 4px 4px 0 0;

            background-color: #f6f7fb;
            .img {
              width: 83px;
              height: 84px;
              margin-bottom: 5px;
              img {
                // width: 83px;
                height: 84px;
              }
            }
          }
        }
      }
    }
  }
}

// 添加商品
::v-deep .add_goods {
  .el-dialog {
    min-height: 210px;
    position: relative;
  }
  .body {
    width: 770px;
    margin: 0 auto;
    .input {
      display: flex;
      align-items: center;
      height: 64px;

      margin-bottom: 20px;
      // padding-left: 17px;
      .el-input {
        width: 200px;
        margin-right: 10px;
      }
      p {
        padding-right: 12px;
      }
    }
    .tips {
      margin-bottom: 16px;
    }
    .list {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      .card_box {
        flex-shrink: 0;
        width: 154px;
        height: 154px;
        padding: 0 10px;
        position: relative;
        .tag {
          width: 24px;
          height: 24px;
          position: absolute;
          top: 0;
          left: 10;
          img {
            height: 100%;
          }
        }
        .card {
          // margin-bottom: 20px;
          border-radius: 4px;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

          .top {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 134px;
            height: 134px;
            padding-top: 16px;
            border-radius: 4px 4px 0 0;

            background-color: #f6f7fb;
            .img {
              width: 83px;
              height: 84px;
              margin-bottom: 5px;
              img {
                // width: 83px;
                height: 84px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
